<!--直播预告组件-->
<template>
  <div id="liveIndex" class="live-page-container"
    v-bind:style="{ marginTop: top, background: linearGradBg, 'background-color': bgcolor, }"
    :class="{ 'have-list': subscribeList.length > 0 }">
    <div class="swipe-main" :style="{ paddingLeft: spacing, paddingRight: spacing, top }">
      <div class="top-title" v-if="subscribeList.length > 0" :style="{ paddingTop: spacingTopB }">
        <div class="title" :style="{ color: titleColor, }">{{ moduleName }}</div>
        <div class="num">{{ subscribeList.length == 0 ? 0 : curIndex + 1 }} <span class="total">/{{
          subscribeList.length
        }}</span></div>
      </div>
      <van-swipe :show-indicators="indicators" :stop-propagation="false" :style="{ paddingTop: spacingTop, }"
        :autoplay="delayTime" class="swipe-box" @change="onChange">
        <van-swipe-item v-for="(item, i) in subscribeList" :key="i" class="box-item">
          <div class="img-box" :style="{ height: lunboheight }">
            <van-image :src="item.imagesUrl" :fit="imgType">
              <template v-slot:loading>
                <van-loading type="spinner" size="20" />
              </template>
              <template v-slot:error>
                <img src="../../images/base/default-placeholder.png" alt="">
              </template>
            </van-image>
          </div>
          <div class="time etc" :style="{ marginTop: spacingBottom }">
            {{ `${formatTime(item.liveStartTime, 4)} 至 ${formatTime(item.liveEndTime, 4)}` }}
          </div>
          <div class="desc etc">{{ item.liveName || "" }}</div>
          <div class="bottom-line">
            <!--            <div v-if="item.isBook==='1'" class="subscribe">-->
            <!--              <span class="img">-->
            <!--                <img src="../../images/base/make.png" alt="">-->
            <!--              </span>-->
            <!--              <span>{{ item.bookNum || 0 }}人预约</span>-->
            <!--            </div>-->
            <!--            <div v-if="item.roomStatus==='ZBZT_ZBYY' && item.userIsBook" class="l-btn">{{ item.userIsBook==='0'?'预约':'已预约' }}</div>-->
            <div class="subscribe">
              <span class="img">
                <img src="../../images/base/make.png" alt="">
              </span>
              <span>{{ 11144 }}人预约</span>
            </div>
            <div class="l-btn">{{ item.userIsBook === '0' ? '预约' : '已预约' }}</div>
          </div>
        </van-swipe-item>
      </van-swipe>
    </div>
  </div>
</template>
<script>
import mixins from './../mixins'
import mixin from './mixins'
export default {
  name: 'LiveTrailerComp',
  mixins: [mixins, mixin],
  props: {
    option: {
      type: Object,
      default: () => ({})
    },
    isInitData: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      curIndex: 0,
      view: '/API-DOCUMENT/document/file/download?id=',
      page: 1,
      pageSize: 8,
      total: 0,
      isNoData: false,
      isLoadError: false,
      loading: false, // 是否处于加载状态
      finished: false, // 是否已加载完所有数据
      isLoading: false, // 是否处于下拉刷新状态
      finishedText: '已经到底了',
      backUrl: '/index',
      subscribeList: [], // 预约的数据
      list: [], // 往期直播
      pTitle: '', // 往期直播的名称，为了不一开始在页面上显示的很突兀，所以先置空
      errorDialog: false,
      noLoginDialog: false,
      hide: false,
      scrollTop: 0,
      backId: '',
      defaultSubscribeList: [
        {
          id: '',
          imagesUrl: '',
          liveStartTime: '2022/11/05 12:00',
          liveEndTime: '2022/11/06 12:30',
          liveName: '測試直播名',
          isBook: '1',
          bookNum: '0',
          roomStatus: 'ZBZT_ZBYY',
          userIsBook: '0'
        },
        {
          id: '',
          imagesUrl: '',
          liveStartTime: '2022/11/05 12:00',
          liveEndTime: '2022/11/06 12:30',
          liveName: '測試直播名2',
          isBook: '1',
          bookNum: '0',
          roomStatus: 'ZBZT_ZBYY',
          userIsBook: '0'
        }
      ]
    }
  },
  computed: {
    bgcolor() {
      return this.option.bgcolor || '#fff'
    },
    bgcolorT() {
      return this.option.bgcolorT || '#fff'
    },
    bgcolorB() {
      return this.option.bgcolorB || '#fff'
    },
    linearGradBg() {
      // return this.option.isLinearGradBg?"linear-gradient(180deg, "+ this.option.bgcolorT + ", " + this.option.bgcolorB+")":(this.option.bgcolor || '#fff')
      return this.option.isLinearGradBg ? this.option.bgcolorLine : (this.option.bgcolor || '#fff')
    },
    spacingTopB() {
      return this.px2rem(this.option.spacingTopB || 0)
    },
    spacingBottom() {
      return this.px2rem(this.option.spacingBottom || 0)
    },
    // 标题颜色
    titleColor() {
      return this.option.titleColor
    },
  },
  async created() {
    if (this.isInitData) {
      const _list = await this.initData()
      this.subscribeList = _list.dataList?.data
    } else {
      this.subscribeList = this.defaultSubscribeList
    }
  },
  methods: {
    setData(data) {
      if (data !== 'error') {
        if (data.dataList.code === '200' && data.dataList.data) {
          this.subscribeList = data.dataList.data
        }
      }
    },
    onChange(e) {
      this.curIndex = e
    },
    formatTime(time, num) {
      if (!time) {
        return
      }
      const d = new Date(time.replace(/-/g, '/'))
      if (num === 3) {
        return (
          d.getFullYear() + '年' +
          (d.getMonth() + 1) +
          '月' +
          d.getDate() +
          '日'
        )
      } else if (num === 4) {
        return (
          d.getFullYear() + '年' +
          (d.getMonth() + 1) +
          '月' +
          d.getDate() +
          '日' + ' ' + (d.getHours() < 10 ? `0${d.getHours()}` : `${d.getHours()}`) + ':' + (d.getMinutes() < 10 ? `0${d.getMinutes()}` : `${d.getMinutes()}`)
        )
      } else {
        return (
          (d.getMonth() + 1) +
          '月' +
          d.getDate() +
          '日'
        )
      }
    },
    getTime(time) {
      return time ? time.substring(0, 10) : ''
    },
    formatDate(date) {
      return `${date.getMonth() + 1}/${date.getDate()}`
    },
    /**
     * 文字裁剪
     */
    clampText() {
      this.$nextTick(() => {
        const clampDom = document.querySelectorAll('.clamp2')
        clampDom.forEach(item => {
          $clamp(item, { clamp: 2 })
        })
      })
    }
  }
}
</script>
<style type="text/scss" lang="scss" scoped>
@import '@/styles/utility/rem.scss';

.live-page-container {
  margin: 0 auto;
  position: relative;
  width: rem(750);
  padding: rem(24);

  &.have-list {
    @include votebg-color(#f6f9ff);
  }

  .swipe-main {
    background: #fff !important;
    border-radius: rem(16);
    margin-bottom: rem(10);
    // padding:rem(12) rem(24);
    display: flex;
    flex-direction: column;
    height: auto;

    .top-title {
      display: flex;
      justify-content: space-between;

      .title {
        font-size: rem(32);
        font-family: PingFang SC Medium, PingFang SC Medium-Medium;
        font-weight: bold;
        text-align: left;
        color: #333333;
      }

      .num {
        font-size: rem(30);
        font-family: PingFang SC Medium, PingFang SC Medium-Medium;
        font-weight: 500;
        color: #333;

        .total {
          color: #999999;
        }
      }
    }

    .swipe-box {
      flex: 1;
      // padding-top: rem(34);
      .box-item {
        width: 100%;
        height: 100%;
        position: relative;

        .img-box {
          width: 100%;
          height: rem(368);
          position: relative;
          border-radius: rem(16);

          .van-image {
            width: 100%;
            height: 100%;

            .van-image__error {
              >img {
                width: rem(120);
                height: rem(120);
              }
            }
          }

        }

        .time {
          padding-top: rem(24);
          font-size: rem(24);
          font-family: PingFang SC Regular, PingFang SC Regular-Regular;
          font-weight: 400;
          text-align: left;
          color: #666666;
        }

        .desc {
          margin-top: rem(18);
          font-size: rem(30);
          font-family: PingFang SC Medium, PingFang SC Medium-Medium;
          font-weight: bold;
          text-align: left;
          color: #333333;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          word-break: break-all;
        }

        .bottom-line {
          display: flex;
          flex-direction: row;
          justify-content: space-between;

          .subscribe {
            margin-top: rem(18);
            font-size: rem(26);
            font-family: PingFang SC Regular, PingFang SC Regular-Regular;
            font-weight: 400;
            color: #444444;

            >span {
              display: inline-block;
            }

            .img {
              vertical-align: middle;
              margin-right: rem(15);

              >img {
                width: rem(22);
                height: rem(28);
              }
            }
          }

          .l-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            left: rem(520);
            bottom: rem(3);
            width: rem(132);
            height: rem(54);
            @include bg-color($mainColor);
            border-radius: rem(27);
            font-size: rem(24);
            font-family: PingFang SC Medium, PingFang SC Medium-Medium;
            font-weight: bold;
            text-align: center;
            color: #ffffff;
          }
        }
      }
    }
  }

  /deep/.van-swipe__indicators{
    top:rem(340)
  }
  .walletMain {
    width: rem(520);
    min-height: rem(344);
    opacity: 1;
    background: #f7f8f9;
    border-radius: rem(20);
    padding-top: rem(47);
    overflow: hidden;

    .wtitle {
      font-size: rem(34);
      font-family: PingFang SC Medium, PingFang SC Medium-Medium;
      font-weight: 700;
      text-align: center;
      color: #333333;
    }

    .wcontent {
      margin: rem(21) auto;
      width: 100%;
      min-height: rem(120);
      opacity: 1;
      font-size: rem(28);
      font-family: PingFang SC Medium, PingFang SC Medium-Medium;
      font-weight: 700;
      text-align: center;
      color: #333333;
      line-height: rem(53);
      display: flex;
      align-items: center;
      justify-content: center;

      &.level {
        text-align: left;
      }

      >span {
        color: #eb523c;
      }
    }

    .wtwoBtn {
      height: rem(87);
      border-top: 1px solid #e5e5e5;
      box-sizing: border-box;
      display: flex;

      .wline {
        width: 1px;
        height: rem(87);
        opacity: 1;
        background: #e5e5e5;
      }

      .wItem {
        height: rem(87);
        line-height: rem(87);
        flex: 1;
        width: 0;
        font-size: rem(30);
        font-family: PingFang SC Medium, PingFang SC Medium-Medium;
        font-weight: 500;
        text-align: center;

        &.qx {
          color: #333333;
          font-weight: 700;
        }

        &.cancel {
          color: #333333;
        }

        &.qr {
          color: #eb523c;
        }
      }
    }
  }
}
</style>
